<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面</title>
    <meta name="description" content="黑马面面">
    <meta name="keywords" content="黑马面面">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition">
<div id="app">
    <div class="content-header common-search-border1">
        <el-button class="butAdd" @click="handleCreate"><i class="fa fa-plus" aria-hidden="true"></i> 新增目录</el-button>
        <el-button class="butAdd" @click="goToCourseView"><i class="fa fa-arrow-left" aria-hidden="true"></i> 返回学科
        </el-button>
    </div>
    <div class="app-container">
        <div class="box common-search-border2">
            <div class="filter-container">
                <!-- 搜索栏 -->
                <el-form :inline="true" :model="requestParameters" ref="requestParameters" class="formInfo"
                         label-width="70px">
                    <el-form-item label="目录名称" prop="name">
                        <el-input placeholder="请输入" v-model="requestParameters.name" style="width: 200px;"
                                  class="filter-item"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="status" prop="status">
                        <el-select placeholder="请选择" v-model="requestParameters.status">
                            <el-option :key="item.id" :label="item.value" :value="item.id"
                                       v-for="item in baseData.isDis"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest">清除</el-button>
                        <el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="box common-table-border" style="margin:8px 0 0;">
            <el-table :data="items" fit highlight-current-row style="width: 100%;">
                <el-table-column label="序号" align="center" width="50px">
                    <template slot-scope="scope">
                        <span>{{ scope.$index+1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="目录名称" align="center">
                    <template slot-scope="scope">
                        <span class="link-type">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建者" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.creator }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建日期" align="center">
                    <template slot-scope="scope">
                        <span class="link-type">{{ scope.row.createDate | dateTransform }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="面试题数量" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.questionQty }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status === 0 ? '启用': '禁用' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400px">
                    <template slot-scope="scope">
                        <div class="operation">
                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"><i
                                    class="fa fa-pencil-square-o"
                                    aria-hidden="true"></i> 修改
                            </el-button>
                            <el-button type="primary" size="mini" @click="handleDisable(scope.row)"><i
                                    class="fa fa-pencil-square-o"
                                    aria-hidden="true"></i> 禁用
                            </el-button>
                            <el-button size="mini" type="danger" @click="handleDeleted(scope.row)"><i
                                    class="fa fa-trash-o" aria-hidden="true"></i>
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination class="pagiantion" v-show="pagination.total>0" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]"
                               :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
                               :total="pagination.total">
                </el-pagination>
            </div>
        </div>
        <!-- 新增目录弹层 -->
        <el-dialog title="新增目录" :visible.sync="dialogFormVisible" width="40%" top="8vh">
            <el-form label-width="120px" :model="form" :rules="rules" ref="form">
                <el-form-item label="目录：" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- end -->
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../plugins/jquery/dist/jquery.js"></script>
<script src="../js/data.json"></script>
<script src="../js/base.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                pagination: {
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                loading: false,
                items: [],
                baseData: base,
                requestParameters: {
                    name: '',
                    status: ''
                },
                dialogFormVisible: false,
                form: {
                    id: 0,
                    name: '',
                    courseId: 0
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请填写',
                        trigger: 'blur'
                    }]
                }
            }
        },
        created() {
            this.form.courseId = parseInt(this.getUrlParam("courseId"), 10);
            this.getList();
        },
        filters: {
            dateTransform: (value) => {
                let index = value.lastIndexOf('.');
                return value.substr(0, index);
            }
        },
        methods: {
            //获取url参数
            getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            getList() {
                let t = this;

                // 必传参数
                let params = {
                    currentPage: t.pagination.pageNum,
                    pageSize: t.pagination.pageSize,
                    queryParams: {
                        courseId: t.form.courseId
                    }
                };
                // 选传参数
                let name = t.requestParameters.name;
                if (name) {
                    params.queryParams.name = name;
                }
                let status = t.requestParameters.status;
                if (status !== '') {
                    params.queryParams.status = status;
                }
                console.log("学科目录分页列表请求参数：");
                console.log(params);

                // t.pagination.total = response.data.result.total;
                // t.items = response.data.result.rows;
                // t.loading = true;
                // 发送请求获取数据
                axios.post(app_path + "/catalog/findListByPage.do", params).then((response) => {
                    if (response.data.flag) {
                        t.pagination.total = response.data.result.total;
                        t.items = response.data.result.rows;
                        t.loading = true;
                    } else {
                        this.$message.error(response.data.message);
                    }
                });
            },
            // 清除
            handleRest() {
                if (this.$refs['requestParameters']) {
                    this.$refs['requestParameters'].resetFields();
                }
            },
            //搜索
            handleSearch() {
                this.getList();
            },
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.pageNum = 1;
                this.getList();
            },
            handleCurrentChange(val) {
                this.pagination.pageNum = val;
                this.getList();
            },
            // 学科管理
            goToCourseView() {
                window.location.href = "courseList.html";
            },
            // 新增目录
            handleCreate() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                this.dialogFormVisible = true;
            },
            // 修改目录
            handleUpdate(row) {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                this.form.id = row.id;
                this.form.name = row.name;
                console.log(this.form);
                this.dialogFormVisible = true;
            },
            handleConfirm() {
                if (!this.form.id) {
                    this.handleCreateConfirm();
                } else {
                    this.handleUpdateConfirm();
                }
            },
            //新增目录确定
            handleCreateConfirm() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let params = this.form;
                        console.log("目录添加请求参数：");
                        console.log(params);
                        // 发送请求
                        //this.$message.success("添加成功");
                        //this.dialogFormVisible = false;
                        //this.getList();
                        // 发送请求
                        axios.post(app_path + "/catalog/add.do", params).then((response) => {
                            if (response.data.flag) {
                                this.$message.success(response.data.message);
                                this.dialogFormVisible = false;
                            } else {
                                this.$message.error(response.data.message);
                            }
                        }).finally(() => {
                            this.getList();
                        });
                    }
                });
            },
            // 修改目录确定
            handleUpdateConfirm() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let params = this.form;
                        console.log("目录更新请求参数：");
                        console.log(params);

                        let response = {
                            "flag": true,
                            "message": "目录更新成功"
                        };
                        console.log("目录更新返回数据：");
                        console.log(response);
                        if (response.flag) {
                            this.$message.success(response.message);
                            this.dialogFormVisible = false;
                        }
                    }
                });
            },
            // 新增/修改目录取消
            handleCancel() {
                this.dialogFormVisible = false;
            },
            // 禁用目录
            handleDisable(row) {
                this.$confirm('此操作将禁用目录 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let params = {
                        catalogId: row.id
                    };
                    console.log("目录禁用请求参数：");
                    console.log(params);

                    let response = {
                        "flag": true,
                        "message": "目录禁用成功"
                    };
                    console.log("目录禁用返回数据：");
                    console.log(response);
                    if (response.flag) {
                        this.$message.success(response.message);
                    }
                }).catch(() => {
                    this.$message.info('已取消操作!')
                });
            },
            // 删除目录
            handleDeleted(row) {
                this.$confirm('此操作将永久删除目录 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    //this.$message.success("删除成功");
                    //this.getList();
                    // 发送请求
                    axios.get(app_path + "/catalog/delete.do?catalogId=" + row.id).then((response) => {
                        if (response.data.flag) {
                            this.$message.success(response.data.message);
                        } else {
                            this.$message.error(response.data.message);
                        }
                    }).finally(() => {
                        this.getList();
                    });
                }).catch(() => {
                    this.$message.info('已取消操作!')
                });
            }
        }
    })
</script>
</html>
